<template>
  <div>
    <el-dialog title="添加区域"
               top="125px"
               :visible.sync="showAddRoom"
               :close-on-press-escape="false"
               :close-on-click-modal="false"
               :before-close="closeModel"
               append-to-body>
      <hr class="boundary">
      <ul class="dialogContent">
        <li class="dialogContentItem">
          <span class="dItemText">区域类型:</span>
          <template>
            <el-select
              v-model="roomTypeId"
              placeholder="请选择区域类型"
              size="small"
              :loading="false"
              @focus="selectRoomTypeList"
            >
              <el-option
                v-for="(val,key) in roomTypeList"
                :key="key"
                :label="val.name"
                :value="val.id"
              ></el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">使用单位:</span>
          <template>
            <el-select
              v-model="deptId"
              placeholder="请选择使用单位"
              size="small"
              :loading="false"
              @focus="selectDeptList"
            >
              <el-option
                v-for="(val,key) in deptList"
                :key="key"
                :label="val.deptName"
                :value="val.id"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">区域楼层:</span>
          <template>
            <el-select
              v-model="floor"
              placeholder="请选择区域楼层"
              size="small"
              :loading="false"
              @focus="selectFloor"
            >
              <el-option
                v-for="(val,key) in allFloor"
                :key="key"
                :label="val+'F'"
                :value="val"
              >
              </el-option>
            </el-select>
          </template>
        </li>
        <li class="dialogContentItem">
          <span class="dItemText">区域名称:</span>
          <template>
              <el-input style="width: 50%" v-model="roomName"></el-input>
          </template>
        </li>
      </ul>
      <hr class="boundary">
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModel">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import delDept from "../department/delDept";

  export default {
    props: {
      // 判断修改内容
      showAddRoom: Boolean,
      campusId: Number,
      buildingId: Number,
      // 打开弹窗
      delGroup: Boolean,
      delId: Number,
    },
    data () {
      return {
        deviceCount: 0,
        roomTypeId: '',
        deptId: '',
        floor: '',
        roomName: '',
        roomTypeList: [],
        deptList: [],
        allFloor: '',
        // showAddRoom: false,
        specialTip: false,
        typeTip: ''
      }
    },
    methods: {
      // 提交
      submit () {
        let self = this
        $.ajax({
          type: 'POST',
          url: this.api + 'rooms',
          headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          dataType: 'json',
          data: JSON.stringify({
            'buildingId': self.buildingId,
            'name': self.roomName,
            'floor': self.floor,
            'roomTypeId': self.roomTypeId,
            'deptId':self.deptId
          }),
          success (data) {
            if(data==1){
              self.$emit('getClassroomsList', self.buildingId)
              self.$message({
                message: '添加成功！',
                type: 'success'
              })
            }else{
              self.$message({
                message: '添加成功！',
                type: 'success'
              })
            }
          }
        })
        self.closeModel()
      },

      selectRoomTypeList () {
        let self = this
        self.roomTypeList = []
        $.ajax({
          type: 'GET',
          url: this.api + 'roomType',
          headers:{
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          async: false,
          success (data) {
            self.roomTypeList = data
            console.log(data)
          },
          error () {
            console.log('error')
          }
        })

      },

      selectDeptList () {
        let self = this
        $.ajax({
          type: 'GET',
          url: this.api + 'departments',
          headers:{
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          async: false,
          success (data) {
            self.deptList = data
            console.log(data)
          },
          error () {
            console.log('error')
          }
        })
      },

      selectFloor(){
        let self = this
        $.ajax({
          type: 'GET',
          url: this.api + 'buildings/'+self.buildingId+'/floors',
          headers:{
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          async: false,
          success (data) {
            self.allFloor = data
            console.log(data)
          },
          error () {
            console.log('error')
          }
        })
      },

      // 关闭窗口
      closeModel () {
        this.roomTypeId = ''
        this.deptId = ''
        this.floor = ''
        this.roomName = ''
        this.showAddRoom = false
        this.$emit('closeModel')
      }
    },
    watch: {
      // delGroupType: function (newVal) {
      //   if (newVal === '校区') {
      //     this.specialTip = true
      //     this.typeTip = '楼栋及教室'
      //   } else if (newVal === '楼栋') {
      //     this.specialTip = true
      //     this.typeTip = '教室'
      //   } else {
      //     this.specialTip = false
      //   }
      // },

      // deviceNum: function (newVal) {
      //   this.deviceCount = newVal
      // },

      delGroup: function (newVal) {
        // if (this.deviceCount === 0) {// 无设备情况下
        this.showAddRoom = newVal
        // } else {
        //   this.showDelTip = newVal
        // }
      }
    },
  }
</script>

<style scoped>
  @import "../../../assets/public/subModal.css";

  .dialogContent {
    /* background: red; */
    margin-top: 25px;
    height: 100%;
    width: 100%;
    text-align: center;
  }

  .dialogContent .dialogContentItem {
    height: 30px;
    margin: 0 0 20px 0;
  }

  .dialogContent .dialogContentItem .dItemText {
    margin-right: 15px;
  }

  .el-dialog__wrapper >>> .el-dialog {
    width: 430px;
  }

  .body {
    position: relative;
    height: 150px;
    text-align: center;
  }

  .tip {
    line-height: 150px;
    font-size: 23px;
    letter-spacing: 1px;
  }

  .specialTip {
    position: absolute;
    top: 93px;
    /*left: 10px;*/
    left: 5%;
    right: 5%;
    margin: 0 auto;
    font-size: 16px;
    color: red;
  }

  .cannotDel {
    margin: auto;
    width: 90%;
    padding: 50px 0;
    text-align: center;
    font-size: 22px;
    letter-spacing: 1.5px;
  }

  .el-button {
    margin: 0 0 0 10px;
    border-radius: 8px;
    font-size: 15px;
    padding: 10px 20px;
  }
</style>
